<!--
模板是与车位管理一致

  -->
<!-- 
<template>
    <a-table :columns="columns" :data-source="data">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle">
            <a-icon type="smile-o" /> Name
        </span>
        <span slot="tags" slot-scope="tags">
            <a-tag
                :color="tags === '审核中' ? 'volcano' : tags === '审核通过' ? 'green' : tags === '审核不通过' ? 'geekblue' : 'volcano'">
                {{ tags }}
            </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link"> More actions
                <a-icon type="down" />
            </a>
        </span>
    </a-table>
</template> -->
<template>
    <div class="main">
        <div class="multi-select">
            <span>{{ tablename }}</span>
            <div>
                <a-button type="primary" @click="adddata">
                    +新建
                </a-button>
                <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
                    批量处理
                </a-button>
            </div>
        </div>
        <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, }" :columns="taberTitle"
            :data-source="data" :rowKey="record => record.pageid">
            <!-- <a slot="action" slot-scope="text">{{ text }}</a> -->

            <span slot="tags" slot-scope="tags">
                <a-tag
                    :color="tags === '审核中' ? 'volcano' : tags === '审核通过' ? 'green' : tags === '审核不通过' ? 'geekblue' : 'volcano'">
                    {{ tags }}
                </a-tag>
            </span>
            <span slot="action" slot-scope="text,record">

                <!-- 跳转到房屋详情页面 -->
                <a @click="JumpReview(record)">审核</a>
                <a-divider type="vertical" />

                <!-- 跳转到新建房屋页面 -->
                <a @click="JumpEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="showDeleteConfirm(record)">
                    删除
                </a>
            </span>
            <!-- <zonelist></zonelist> -->
        </a-table>
    </div>
</template>
<script>

export default {
    name: 'ServiceLIstFrom',
    data() {
        return {

            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            // data: [],

        };
    },
    // 接收传递进来的头部数据进行渲染
    props: {
        taberTitle: {
            type: Array,
            default: []
        },
        tablename: {
            type: String,
            default: ""
        },
        data: {
            type: Array,
            default: []
        },
        pageurl: {
            type: Array,
            default: []
        }
    },
    mounted() {
        // this.selectedRowKeys = this.taberTitle

    },
    created() {
        //将数据重新进行赋值，以防修改数据时修改父组件传入进来的数据



    },
    watch: {

    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
    methods: {
        //跳转审核页
        JumpReview() {
            this.$router.push(this.pageurl[0])
        },
        //跳转编辑页
        JumpEdit() {
            this.$router.push(this.pageurl[1])
        },
        start() {
            this.loading = true;
            // ajax request after empty completing
            // console.log(this.selectedRowKeys)

            setTimeout(() => {
                let A = this.data.filter(item => {
                    return !(this.selectedRowKeys.includes(item.pageid))
                })
                // console.log(A)
                this.data = A
                this.loading = false;
                this.selectedRowKeys = [];
            }, 1000);
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            // console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
            this.selectedRowKeys = selectedRowKeys;
        },
        addlistdatafn() {

        },
        record(record) {
            return {
                props: {
                    ParkingState: record.ParkingState,
                },
            }
        },
        showDeleteConfirm(record) {
            // console.log(record)//当前列的数据
            this.$confirm(
                {
                    title: '删除确认',
                    content: '确定删除此信息吗？',
                    okText: '确认',
                    okType: 'danger',
                    cancelText: '取消',
                    icon: "",
                    onOk: () => {

                        //点击删除时进行过滤数据
                        let staging = this.data.filter(item => {
                            return !(item.pageid == record.pageid)
                        })

                        this.data = staging
                    },
                    onCancel() {
                        // console.log('Cancel');
                    },
                });
        },
        adddata() {

        },
        // packCheck(){
        //     this.$router.replace("/ParkCheck")
        // },
        // carEdit(){
        //     this.$router.replace("/ParKingEdit")
        // }
    },
};
</script>

<style lang="less" scoped>
.main {
    width: 100%;
}


/deep/.multi-select {
    text-align: right;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    >span {
        font-size: 18px;
    }

    button:last-child {
        margin-left: 10px;
    }
}

/deep/.ant-divider {
    color: transparent;
    background-color: transparent;
}

/deep/.ant-table-row-cell-last {
    width: 180px;
}
</style>